<template>
  <div class="upload-model" v-permission="['upload:image:btn']">
    <el-button type="warning" class="uploadDiv" @click="$refs.fileInput.click()">
      <i :class="{ 'el-icon-loading': loading, 'el-icon-picture-outline': !loading }"></i>
      {{ isResource ? '上传素材' : '上传图片' }}
      <input
        v-if="!loading"
        :multiple="multiple"
        type="file"
        ref="fileInput"
        class="file"
        :accept="accept"
        @click="clickInput"
        @change="change"
      />
    </el-button>
  </div>
  <!-- </div> -->
</template>

<script>
  export default {
    props: {
      limit: {
        default: false,
      },
      multiple: {
        default: false,
        type: Boolean,
      },
      drag: {
        default: false,
        type: Boolean,
      },
      maxSize: {
        default: 1024, // kb
      },
      folder: {
        type: String,
        default: '',
      },
      useFileName: {
        type: Boolean,
        default: false,
      },
      isResource: {
        type: Boolean,
        default: false,
      },
      isPublic: {
        type: Boolean,
        default: false,
      },
      acceptOuter: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        loading: false,
        accept: this.acceptOuter ? this.acceptOuter : this.isResource ? '*' : 'image/*',
        progress: 0,
      };
    },
    methods: {
      clickInput(e) {
        this.$refs.fileInput.value = null;
      },
      change(e) {
        var file = this.$refs.fileInput.files;
        for (var i = 0; i < file.length; i++) {
          if (this.isResource) {
            this.uploadImg(file[i]);
          } else {
            this.checkImg(file[i]);
          }
        }
      },
      checkImg(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = e.target.result;
          // 加载图片获取图片真实宽度和高度
          const image = new Image();
          image.onload = () => {
            // let width = image.width
            // let height = image.height
            let size = file.size / 1024;
            // 可在此处对图片的大小进行判断，不合适的不上传
            if (size < this.maxSize) {
              this.uploadImg(file);
            } else {
              this.$message.warning(`图片过大,请控制在${this.maxSize}kb以内`);
            }
          };
          image.src = data;
        };
        reader.readAsDataURL(file);
      },
      dragUpload(v) {
        this.checkImg(v.file);
      },
      uploadImg(file) {
        this.loading = true;
        // 获取上传凭证
        this.$UploadCore({
          isPublic: this.isPublic,
          useFileName: this.useFileName,
          folder: this.folder,
          file,
        })
          .then((res) => {
            this.loading = false;
            this.$emit('upload', res);
            this.$message.success(`${file.name}上传成功!`);
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
          });
      },
    },
  };
</script>

<style lang="less">
  .upload-model,
  .uploadDiv {
    .file {
      width: 100%;
      height: 100%;
      opacity: 0;
      display: none;
      cursor: pointer;
    }
  }
</style>
